<template>
  <rx-dialog @handOk="handleOk" @cancel="cancel">
    <div class="flexBoxs">
      <div class="top">
        <div class="left">
          <header>配置</header>
          <div class="fieldContainer">
              <template v-if="this.isMain=='no'">
                  <div v-if="this.isMain=='no'">主表字段</div>
                  <a-select  style="width: 100%;" allowClear :options="mainFields" @change="insert"></a-select>
              </template>
              <div v-if="this.isMain=='no'">子表字段</div>
              <div v-else>字段</div>
              <a-select style="width: 100%;" allowClear :options="fields" @change="insert"></a-select>
              <div>上下文数据</div>
              <a-select style="width: 100%;" allowClear :options="contextOptions" @change="insert"></a-select>
          </div>
        </div>
        <div class="contents">
            <a-textarea style="height: 100%;resize: none;" v-model="valueData"></a-textarea>
        </div>
      </div>
    </div>
  </rx-dialog>
</template>

<script>
  import {RxDialog, Util, RxLayout} from "@lowcode/jpaas-common-lib"
  import FormDbApi from "@/api/form/bo/formDb";
  import FormBoAttr from "@/api/form/bo/formBoAttr";

  export default {
    name: "FormTransConfigScript",
    props: ["layerid", "destroy", "value", "entId", "isMain","mainEntId", "entName"],
    components: {
      RxDialog,
      RxLayout
    },
    data() {
      return {
        valueData: "",
        fields: [],
        mainFields: [],
        contextOptions:[
            {value: 'context.curDate', label:'当前时间'},
            {value: 'context.curUserId', label:'当前用户Id'},
            {value: 'context.curUserName', label:'当前用户姓名'},
            {value: 'context.curDepId', label:'当前部门Id'},
            {value: 'context.curDepName', label:'当前部门名称'},
            {value: 'context.curInstId', label:'当前机构Id'},
            {value: 'context.curCompanyId', label:'当前公司ID'},
        ],
          //默认的标准字段
          defField:[
              {label:"外键",value:"REF_ID_"},
              {label:"父ID",value:"PARENT_ID_"},
              {label:"公司ID",value:"COMPANY_ID_"},
              {label:"机构ID",value:"TENANT_ID_"},
              {label:"创建人ID",value:"CREATE_BY_"},
              {label:"更新人ID",value:"UPDATE_BY_"},
              {label:"创建部门ID",value:"CREATE_DEP_ID_"},
              {label:"创建时间",value:"CREATE_TIME_"},
              {label:"更新时间",value:"UPDATE_TIME_"},
              {label:"流程实例ID",value:"INST_ID_"},
              {label:"流程实例状态",value:"INST_STATUS_"},
          ],
      }
    },
    created() {
      this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formTableFormula", key);
        },
      init() {
        if (this.value) {
          this.valueData = this.value;
        }
        this.getCombFields();
      },
      getCombFields() {
        var self = this;
        FormBoAttr.getByEntId(this.entId).then(res => {
            let fields = res.map(item => {
                let name = item.fieldName?item.fieldName:item.name
                return {label: item.comment, value: "formJson."+ name.toUpperCase()}
            })
            let defaultFields = this.defField.map(item=>{
                return {label: item.label, value: "formJson."+item.value}
            })
            self.fields = fields.concat(defaultFields)

        })
        if (this.isMain=="no"){
            FormBoAttr.getByEntId(this.mainEntId).then(res => {
                let mainFields = res.map(item => {
                    let name =item.fieldName?item.fieldName:item.name
                    return {label: item.comment, value: "formJson.mainData."+ name.toUpperCase()}
                })
                let defaultFields = this.defField.map(item=>{
                    return {label: item.label, value: "formJson."+item.value}
                })
                self.mainFields = mainFields.concat(defaultFields)
            })
        }
      },
      getData() {
        return this.valueData;
      },
      handleOk() {
        Util.closeWindow(this, "ok", this.getData());
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      },
      insert(text) {
        if (text) {
          this.valueData += text;
        }
      }
    }
  }
</script>

<style scoped>
  fieldset {
    height: 100%;
    border: 1px solid silver;
  }

  fieldset legend {
    font-weight: bold;
  }

  div.operatorContainer {
    padding: 5px;
    text-align: left;
    overflow: auto;
    margin-top: 6px;
  }
  div.operatorContainer > div {
    border-radius: 5px;
    border: 1px solid silver;
    display: inline-block;
    text-align: center;
    margin: 4px;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 10px;
    cursor: pointer;
    background: #f0f2f5;
  }

  div.operatorContainer > div:hover {
    background: white;
  }

  div.fieldContainer {
    padding:0 10px;
    text-align: left;
    overflow: auto;
  }
  div.fieldContainer>div{
    padding: 10px 0;
  }

  .flexBoxs{
    display: flex;
    width: 100%;
    height: 100%;
    background: #f0f2f5;
    flex-direction: column;
    box-sizing: border-box;
  }
  .flexBoxs .bottom{
    flex: 1;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .top{
    display: flex;
    margin-bottom: 10px;
    height: 400px;
  }
  .top header{

  }
  .top header:before{
    content: '';
    width: 3px;
    height: 13px;
    display: inline-block;
    background: #4D9EFF;
    margin-right: 8px;
    vertical-align: -2px;
  }
  .top .contents{
    flex: 1 ;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .top .left{
    width:300px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-right: 10px;
    box-sizing: border-box;
    box-sizing: border-box;
  }
</style>